<template>
  <el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item title="免责声明" name="1">
      <div>本站仅供学习交流使用</div>
      <div>本站不收取任何费用， 禁止用于商业用途。</div>
    </el-collapse-item>
    <el-collapse-item title="开始" name="2">
      <div class="block">
        <span class="demonstration">仿照精度-数值越大越牛批</span>
        <el-slider v-model="value1" :format-tooltip="formatTooltip"></el-slider>
        <el-button type="danger">生成行程单 </el-button>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          label="序号"
          width="70px">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="car_type"
          label="车型"
          width="70px">
        </el-table-column>
        <el-table-column
          prop="sc_time"
          label="上车时间"
          width="100px">
        </el-table-column>
        <el-table-column
          prop="city"
          label="城 市"
          width="70px">
        </el-table-column>
        <el-table-column
          prop="start_adress"
          label="起点"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="end_adress"
          label="终点"
          width="200px">
        </el-table-column>
        <el-table-column
          prop="long"
          label="里程 [公里]"
          width="70px">
        </el-table-column>
        <el-table-column
          prop="price"
          label="金额[元]"
          width="70px">
        </el-table-column>
        <el-table-column
          prop="address"
          label="备注"
          width="200px">
          <el-input v-model="car_type" placeholder="car_type"></el-input>
        </el-table-column>
      </el-table>
    </el-collapse-item>
  </el-collapse>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          start_adress: '上海市徐汇区徐家汇666 弄',
          end_adress: '北京市西城区象牙胡同',
          sc_time: '06-08 08:30 周一',
          car_type: '快车',
          city: '北京市',
          long: '10.5',
          price: '47.50'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          start_adress: '上海市徐汇区徐家汇666 弄',
          end_adress: '北京市西城区象牙胡同',
          sc_time: '06-08 08:30 周一',
          car_type: '快车',
          city: '北京市',
          long: '10.5',
          price: '47.50'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          start_adress: '上海市徐汇区徐家汇666 弄',
          end_adress: '北京市西城区象牙胡同',
          sc_time: '06-08 08:30 周一',
          car_type: '快车',
          city: '北京市',
          long: '10.5',
          price: '47.50'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          start_adress: '上海市徐汇区徐家汇666 弄',
          end_adress: '北京市西城区象牙胡同',
          sc_time: '06-08 08:30 周一',
          car_type: '快车',
          city: '北京市',
          long: '10.5',
          price: '47.50'
        }]
      }
    },
    methods: {
      handleChange(val) {
        value1: 100
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      formatTooltip(val) {
        return val / 10;
      }
    }
  }
</script>

<style scoped>

</style>
